<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图书详情 - 图书购物车系统</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!--  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>-->
  <script src="js/vue.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
      background-color: #f5f7fa;
      color: #333;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    .header {
      background: linear-gradient(135deg, #1e5799 0%,#207cca 51%,#2989d8 100%);
      color: white;
      padding: 20px 0;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    .header-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .logo {
      font-size: 24px;
      font-weight: bold;
      display: flex;
      align-items: center;
    }
    .logo i {
      margin-right: 10px;
      font-size: 28px;
    }
    .nav {
      display: flex;
    }
    .nav-item {
      margin-left: 30px;
      cursor: pointer;
      font-size: 16px;
      transition: color 0.3s;
      padding: 5px 10px;
      border-radius: 4px;
      position: relative;
    }
    .nav-item:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
    .cart-count {
      position: absolute;
      top: -8px;
      right: -8px;
      background-color: #e74c3c;
      color: white;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .page-title {
      font-size: 24px;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid #ebeef5;
      color: #1e5799;
    }
    .back-button {
      margin-top: 30px;
      text-align: center;
    }
    .detail-container {
      background: white;
      border-radius: 6px;
      padding: 30px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    .detail-header {
      display: flex;
      margin-bottom: 30px;
    }
    .detail-image {
      width: 300px;
      height: 400px;
      background-color: #f5f7fa;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 30px;
      border-radius: 4px;
      overflow: hidden;
    }
    .detail-image img {
      max-width: 100%;
      max-height: 100%;
    }
    .detail-info {
      flex-grow: 1;
    }
    .detail-title {
      font-size: 28px;
      font-weight: bold;
      margin-bottom: 15px;
      color: #1e5799;
    }
    .detail-price {
      color: #e74c3c;
      font-size: 26px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .detail-meta {
      margin-bottom: 25px;
    }
    .detail-meta-item {
      margin-bottom: 8px;
      font-size: 16px;
      color: #606266;
    }
    .detail-meta-label {
      display: inline-block;
      width: 120px;
      color: #909399;
    }
    .detail-desc {
      line-height: 1.8;
      color: #606266;
      font-size: 16px;
      margin-bottom: 30px;
    }
    .cart-actions {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }
    .quantity-selector {
      margin-right: 20px;
    }
    .footer {
      text-align: center;
      padding: 30px 0;
      color: #909399;
      font-size: 14px;
      margin-top: 50px;
      border-top: 1px solid #ebeef5;
    }
    .loading {
      text-align: center;
      padding: 50px 0;
      font-size: 16px;
      color: #909399;
    }
    @media (max-width: 768px) {
      .detail-header {
        flex-direction: column;
      }
      .detail-image {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
      }
    }
  </style>
</head>
<body>
<div id="app">
  <!-- 顶部导航 -->
  <div class="header">
    <div class="header-content">
      <div class="logo">
        <i class="el-icon-reading"></i>
        图书购物车系统
      </div>
      <div class="nav">
        <a href="bookList.html" class="nav-item">图书列表</a>
        <a href="myCar1.html" class="nav-item">
          购物车
          <span v-if="cartCount > 0" class="cart-count">{{ cartCount }}</span>
        </a>
      </div>

      <div class="header-info" v-if="curUser==null">
        <a href="AiLogin.html">登录</a>
        <a href="register.html">注册</a>
      </div>

      <div class="header-info" v-else>
        <span style="color:yellow">欢迎您:</span><label style="font-weight: bold;font-size: 18px">{{curUser.userName}}</label>
        <el-link type="danger" @click="exit">退出</el-link>
      </div>

    </div>
  </div>

  <div class="container">
    <div class="back-button">
      <el-button type="primary" icon="el-icon-arrow-left" @click="goToList">返回列表</el-button>
    </div>

    <h1 class="page-title">图书详情</h1>

    <div v-if="currentBook" class="detail-container">
      <div class="detail-header">
        <div class="detail-image">
          <img :src="getBookImage(currentBook.bookImage)" alt="图书封面">
        </div>
        <div class="detail-info">
          <h1 class="detail-title">{{ currentBook.bookName }}</h1>
          <div class="detail-price">¥{{ currentBook.bookPrice.toFixed(2) }}</div>

          <div class="detail-meta">
            <div class="detail-meta-item">
              <span class="detail-meta-label">图书ID：</span>
              {{ currentBook.bookId }}
            </div>
            <div class="detail-meta-item">
              <span class="detail-meta-label">上架状态：</span>
              <el-tag :type="currentBook.bookIsDisplay === -1 ? 'danger' : 'success'">
                {{ currentBook.bookIsDisplay === -1 ? '未上架' : '已上架' }}
              </el-tag>
            </div>
            <div class="detail-meta-item">
              <span class="detail-meta-label">创建时间：</span>
              {{ currentBook.createTime || '暂无信息' }}
            </div>
            <div class="detail-meta-item">
              <span class="detail-meta-label">更新时间：</span>
              {{ currentBook.updateTime || '暂无信息' }}
            </div>
            <div class="detail-meta-item">
              <span class="detail-meta-label">删除状态：</span>
              <el-tag :type="currentBook.isDeleted === 0 ? 'success' : 'danger'">
                {{ currentBook.isDeleted === 0 ? '未删除' : '已删除' }}
              </el-tag>
            </div>
          </div>

          <div class="detail-desc">
            {{ currentBook.bookDesc }}
          </div>

          <div class="cart-actions">
            <div class="quantity-selector">
              <el-input-number
                      v-model="quantity"
                      :min="1"
                      :max="10"
                      label="数量">
              </el-input-number>
            </div>
            <el-button
                    type="success"
                    icon="el-icon-shopping-cart-full"
                    @click="addToCart"
                    :loading="addingToCart">
              加入购物车
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <div v-else class="loading">
      <i class="el-icon-loading"></i>
      <p>正在加载图书详情...</p>
    </div>
  </div>

  <div class="footer">
    © 2023 图书购物车系统 | 前端使用ElementUI+Axios实现
  </div>
</div>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        currentBook: null,
        quantity: 1,
        addingToCart: false,
        cartCount: 0,
        curUser:null,//当前登录者对象
      };
    },
    mounted() {
      const bookId = this.getBookIdFromUrl();
      if (bookId) {
        this.fetchBookDetail(bookId);
      }
      this.fetchCartCount();
      this.getCurUser();
    },
    methods: {
      //获得当前登录的用户信息
      getCurUser(){
        //从sessionStorage获得当前登录的用户
        this.curUser =JSON.parse(window.sessionStorage.getItem("curUser"));

      },
      /**
       * 用户退出
       */
      exit(){
        axios
                .delete('/user/exit')
                .then(response => {
                  let result = response.data;
                  if(result.success){
                    //清除sessionStorage中存储的用户信息
                    window.sessionStorage.removeItem("curUser");
                    //设置curUser属性的值为null
                    this.curUser = null;
                    this.$message.success({
                      message:result.message,
                      duration:1500
                    });
                  }
                })
                .catch(err => {
                  console.log(err);
                });
      },
      getBookIdFromUrl() {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get('id');
      },

      fetchBookDetail(bookId) {
        this.$loading({ fullscreen: true, text: '正在加载图书详情...' });

        axios.get(`http://localhost:8081/books/findBookById/${bookId}`)
                .then(response => {
                  this.currentBook = response.data;
                  this.$loading().close();
                })
                .catch(error => {
                  console.error('获取图书详情失败:', error);
                  this.$message.error('获取图书详情失败，请稍后重试');
                  this.$loading().close();
                });
      },

      fetchCartCount() {
        const userId = "93";
        axios.get(`http://localhost:8081/car/getCarByUser/${userId}`)
                .then(response => {
                  this.cartCount = response.data.reduce((count, item) => count + item.carCount, 0);
                })
                .catch(error => {
                  console.error('获取购物车数量失败:', error);
                });
      },

      addToCart() {
        if (!this.currentBook) return;

        this.addingToCart = true;

        const cartItem = {
          carId: "",
          bookId: this.currentBook.bookId,
          carCount: this.quantity,
          userId: "93",
          createTime: "",
          updateTime: "",
          isDeleted: ""
        };

        axios.post('http://localhost:8081/car/addCar', cartItem)
                .then(() => {
                  this.addingToCart = false;
                  this.$message.success('已添加到购物车');
                  this.fetchCartCount();
                })
                .catch(error => {
                  console.error('添加到购物车失败:', error);
                  this.$message.error('添加到购物车失败');
                  this.addingToCart = false;
                });
      },

      goToList() {
        window.location.href = 'bookList.html';
      },




      getBookImage(imageName) {
        return imageName ? `images/books/${imageName}` : 'https://via.placeholder.com/200x280?text=No+Image';
      }
    }
  });
</script>
</body>
</html>